<template>
  <header class="message-info-view-header" v-if="Conver">
    <div class="message-info-views">
      <header-view :list="Conver" />
    </div>
    <div class="flex">
      <div class="message-info-add" v-show="Conver.type == 'GROUP' && false" title="添加成员">
        <svg-icon iconClass="tianjia" class="icon-hover" />
      </div>
      <div
        class="message-info-setup"
        v-show="Conver.type == 'GROUP'"
        title="设置"
        @click="openSetup"
      >
        <FontIcon iconName="MoreFilled" class="icon-hover" />
      </div>
    </div>
  </header>
</template>

<script setup>
import { h, ref } from "vue";
import { useState } from "@/utils/hooks/useMapper";
import { GET_MESSAGE_LIST } from "@/store/mutation-types";
import { useStore } from "vuex";

const { state, commit, dispatch } = useStore();
const { Conver, groupDrawer, groupProfile } = useState({
  groupDrawer: (state) => state.groupinfo.groupDrawer,
  groupProfile: (state) => state.groupinfo.groupProfile,
  Conver: (state) => state.conversation.currentConversation,
});
const openSetup = () => {
  commit("setGroupStatus", true);
  console.log(groupProfile.value);
};

const HeaderView = (props) => {
  const { list } = props;
  if (!list) return;
  const { type } = list;
  let fn = null;
  switch (type) {
    case "C2C":
      const {
        userProfile: { userID, nick },
        remark,
      } = list || {};
      fn = h("span", { class: "style-c2c" }, nick || userID || remark);
      break;
    case "GROUP":
      const {
        groupProfile: { name, groupID },
      } = list;
      fn = h("span", { onClick: () => openSetup(), class: "style-group" }, name || groupID);
      break;
    case "@TIM#SYSTEM":
      fn = h("span", { class: "style-system" }, "系统通知");
      break;
    default:
      fn = null;
      break;
  }
  return h("p", fn);
};
</script>

<style lang="scss" scoped>
.message-info-view-header {
  height: 60px;
  background: var(--color-body-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  .message-info-views {
    :deep(.style-group) {
      cursor: pointer;
    }
  }
}

.message-info-setup {
  margin-left: 10px;
}
</style>
